<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <header>
            <div class="address">
                <img src="./img/定位.png" alt="">
                <span>E-ZIKOO智慧谷</span>
                <img src="./img/右右.png" alt="">
            </div>
            <div class="search">
                <div>
                    <img src="./img/搜索.png" alt="">
                    <input type="text" placeholder="请输入商家或商品名称">
                </div>
                <i>搜索</i>
            </div>
        </header>
        <!-- 主体 -->
        <main>
            <div class="scroll-box">
                <div class="pulldown">下拉刷新...</div>
                <nav>
                    <div><img src="./img/美食.webp" alt=""><span>美食</span></div>
                    <div><img src="./img/鲜花.webp" alt=""><span>鲜花蛋糕</span></div>
                    <div><img src="./img/甜品奶茶.webp" alt=""><span>甜点饮品</span></div>
                    <div><img src="./img/快餐.webp" alt=""><span>快餐简食</span></div>
                    <div><img src="./img/超市.webp" alt=""><span>超市便利</span></div>
                    <div><img src="./img/晚餐优选.webp" alt=""><span>晚餐优选</span></div>
                    <div><img src="./img/异国料理.webp" alt=""><span>异国料理</span></div>
                    <div><img src="./img/美团专送.webp" alt=""><span>美团专送</span></div>
                    <div><img src="./img/小吃.webp" alt=""><span>小吃馆</span></div>
                    <div><img src="./img/家常菜.webp" alt=""><span>家常菜</span></div>
                </nav>
                <!-- swiper 轮播图 -->
                <div class="swiper srcollImg">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide s1"><img src="./img/scroll1.jpg" alt=""></div>
                        <div class="swiper-slide s2"><img src="./img/srcoll2.jpg" alt=""></div>
                        <div class="swiper-slide s3"><img src="./img/srcoll3.jpg" alt=""></div>
                        <div class="swiper-slide s4"><img src="./img/scroll4.jpg" alt=""></div>
                    </div>
                </div>
                <!-- 标签 -->
                <div class="tags">
                    <div>高分点评</div>
                    <div>优惠商家</div>
                    <div>满减优惠</div>
                    <div>品牌商家</div>
                    <div><img src="./img/菜单.png" alt=""></div>
                </div>
                <!-- 商品列表 -->
                <div class="goods">您的网络好像不太给力，请稍后重试...</div>
                <dis class="pullup">上拉加载商品...</dis>
            </div>
        </main>

        <!-- 尾部 -->
        <footer>
            <a href="">
                <img src="./img/footer1.webp" alt="">
                <span>首页</span>
            </a>
            <a href="">
                <img src="./img/footer2.webp" alt="">
                <span>订单</span>
            </a>
            <a href="">
                <img src="./img/footer3.webp" alt="">
                <span>我的</span>
            </a>
        </footer>

    </div>
    <!-- <div class="cover">遮蔽层</div> -->
    <script src="./js/common.js"></script>
    <!-- 引入响应式 -->
    <script src="./js/pageSize.js"></script>
    <!-- 引入移动端点击滑动事件 -->
    <script src="./js/myTouch.js"></script>
    <!-- 引入swiper -->
    <script src="./js/swiper-bundle.min.js"></script>
    <!-- 引入betterScroll -->
    <script src="./js/better-scroll.js"></script>
    <!-- 引入首页业务逻辑js -->
    <script src="./js/index.js"></script>

</body>

</html>